<template>
    <view class="mine">
        <view class="custom" :style="'top:' + customTop + 'px'">
                <text>我的</text>
            </view>
            <view class="main">
                <view class="header" :style="'padding-top:' + titleHeight + 'px'"></view>
            </view>
        <view class="index">
            <!-- 头像 -->
            <view class="avatar">
                <view class="avatar-box">
                    <u-image width="120rpx" height="120rpx" :src="myInfoVo.avatar" @click="handleAvatar" v-if="myInfoVo.avatar" shape="circle"></u-image>
                    <u-image width="120rpx" height="120rpx" src="/static/img/avatar.png" @click="handleAvatar" shape="circle" v-else></u-image>
                    <view class="userId">
                        <view class="phonenumber" @click="handleAvatar"> {{userInfo.nickName}} </view>
                        <view class="dis_f_l_c" v-if="isUp">
                            <view class="m_r_5">
                                <!-- <u-image width="30rpx" :src="myInfoVo.vipUrl" v-if="myInfoVo.vipUrl" shape="circle"></u-image> -->
                                <image :src="myInfoVo.vipUrl" style="width: 26rpx;" mode="widthFix"></image>
                            </view>
                            <view class="info" @click="goVip">
							<u-tag :text="userInfo.vipName" size="mini" shape="circle" bgColor="#31312D" borderColor="#31312D" color="#F2DCAC" @click="goVip"></u-tag>
							<view style="margin-left: 10rpx;" @click="goVip">
								<u-tag text="去升级" plain size="mini" @click="goVip"></u-tag>
							</view>
							<!-- <text style="color: #999;margin-left: 10rpx;border: #999 1rpx dashed;">去升级 >></text> -->
							</view>
                        </view>
                        <!-- <view class="info c_f" @click="copy(myInfoVo.userId)"> 推荐码: {{myInfoVo.userId}}
                          <image src="/static/img/copy.png" style="width:28rpx;height:28rpx;margin-left: 10rpx;" mode="aspectFit"></image>
                        </view> -->
                    </view>
                </view>
                <!-- 钱包 -->
                <view>
                    <u-grid :border="true" col="2">
                        <u-grid-item @click="handleCashRecord(0)">
                            <view style="font-weight: 700;margin-bottom: 10rpx;">
                                <text style="font-size: 20rpx;">¥ </text>
                                {{userInfo.amount}}
                            </view>
                            <view style="font-size: 24rpx;">我的钱包</view>
                        </u-grid-item>
                        <!--            <u-grid-item @click="showQrCode = true">
                          <view style="margin-bottom: 10rpx;">
                            <u-image width="40rpx" height="40rpx" src="/static/img/code.png"></u-image>
                          </view>
                          <view style="font-size: 24rpx;">邀请码</view>
                        </u-grid-item>-->
                        <u-grid-item @click="handleCashRecord(1)">
                            <view style="font-weight: 700;margin-bottom: 10rpx;">
                                {{userInfo.integral||0}}
                            </view>
                            <view style="font-size: 24rpx;">我的积分</view>
                        </u-grid-item>
                    </u-grid>
                    <view>
                        <u-popup :show="showQrCode" @close="showQrCode=false" mode="center" :round="10" :safeAreaInsetBottom="false">
                            <view style="padding: 30rpx;">
                                <u-image width="300rpx" height="300rpx" :src="myInfoVo.qrCodeUrl"></u-image>
                            </view>
                        </u-popup>
                    </view>
                </view>
            </view>
            <view class="m_t_10">
<!--                <image @click="showTopUp = true" src="/static/img/qbcz.jpg" style="width: 700rpx;height: 160rpx;border-radius: 14rpx;"></image>-->
                <image @click="handleInfo('/pages/mine/balanceRecharge?amount='+userInfo.amount)" src="/static/img/qbcz.jpg" style="width: 700rpx;height: 160rpx;border-radius: 14rpx;"></image>
            </view>
            <!-- 我的订单 -->
            <view class="order">
                <view class="title">我的订单</view>
                <u-grid :border="false" col="5">
                    <u-grid-item v-for="(listItem,listIndex) in orderTab" :key="listIndex" @click="handleOrder(listIndex)">
                        <view style="position: relative;">
                            <u-icon :customStyle="{paddingTop:10+'rpx'}" :name="listItem.imgUrl" :size="20"></u-icon>
                            <view style="position: absolute;top:0;right: -12rpx" v-if="listIndex==1">
                                <u-badge  :value="myInfoVo.order2"></u-badge>
                            </view>
                            <view style="position: absolute;top:0;right: -12rpx" v-if="listIndex==2">
                                <u-badge  :value="myInfoVo.order3"></u-badge>
                            </view>
                            <view style="position: absolute;top:0;right: -12rpx" v-if="listIndex==3">
                                <u-badge  :value="myInfoVo.order4"></u-badge>
                            </view>
                        </view>
                        <text class="grid-text">{{listItem.name}}</text>
                    </u-grid-item>
                </u-grid>
            </view>
            <!-- 我的商品 -->
            <!-- <view class="order c_f" v-if="isCash">
                      <view class="title">我的商品</view>
                      <u-grid :border="false" col="4">
                          <u-grid-item v-for="(listItem,listIndex) in goodsTab" :key="listIndex"
                              @click="handlerMyGoods(listIndex)">
                              <u-icon :customStyle="{paddingTop:10+'rpx'}" :name="listItem.imgUrl" :size="20"></u-icon>
                              <text class="grid-text">{{listItem.name}}</text>
                          </u-grid-item>
                      </u-grid>
                  </view> -->
            <!-- 客服 -->
            <view class="order">
<!--                 <view class="kefu" @click="goCoupon">
                            <view class="kefu-left">
                                <u-image width="38rpx" height="38rpx" src="/static/img/优惠券.png"></u-image>
                                <text style="margin-left: 16rpx;">领券中心</text>
                            </view>
                            <u-icon name="arrow-right"></u-icon>
                        </view>-->
                <!-- <view style="height: 6rpx"></view>
                        <view class="kefu" @click="goLike">
                            <view class="kefu-left">
                                <u-image width="38rpx" height="38rpx" src="/static/img/heart.png"></u-image>
                                <text style="margin-left: 16rpx;">我的收藏</text>
                            </view>
                            <u-icon name="arrow-right"></u-icon>
                        </view> -->
                <!-- <view style="height: 6rpx"></view>
                        <view class="kefu" @click="showBind = true">
                            <view class="kefu-left">
                                <u-image width="38rpx" height="38rpx" src="/static/img/邀请人.png"></u-image>
                                <text style="margin-left: 16rpx;">绑定咨询</text>
                            </view>
                            <u-icon name="arrow-right"></u-icon>
                        </view>
                        <view style="height: 6rpx"></view>
                        <view class="kefu" @click="goTeam">
                            <view class="kefu-left">
                                <u-image width="38rpx" height="38rpx" src="/static/img/td.png"></u-image>
                                <text style="margin-left: 16rpx;">爬宠小伙伴</text>
                            </view>
                            <u-icon name="arrow-right"></u-icon>
                        </view> -->
                <!-- <view style="height: 6rpx"></view>
                        <view class="kefu" @click="goGuanZhu">
                            <view class="kefu-left">
                                <u-image width="38rpx" height="38rpx" src="/static/img/guanzhu.png"></u-image>
                                <text style="margin-left: 16rpx;">我的关注</text>
                            </view>
                            <u-icon name="arrow-right"></u-icon>
                        </view> -->
                <!-- <view style="height: 6rpx"></view>
                        <view class="kefu" @click="showAddress = true">
                            <view class="kefu-left">
                                <u-image width="38rpx" height="38rpx" src="/static/img/address.png"></u-image>
                                <text style="margin-left: 16rpx;">我的地址</text>
                            </view>
                            <u-icon name="arrow-right"></u-icon>
                        </view> -->
                <view style="height: 6rpx"></view>
                <view class="kefu" @click="showPhone = true">
                    <view class="kefu-left">
                        <u-image width="38rpx" height="38rpx" src="/static/img/phone1.png"></u-image>
                        <text style="margin-left: 16rpx;">客服电话</text>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view>
                <view style="height: 6rpx"></view>
<!--             <view class="kefu">
                    <view class="kefu-left">
                        <u-image width="38rpx" height="38rpx" src="/static/img/kefu1.png"></u-image>
                        <u-button customStyle="border: #000 0 dashed;background-color: #fff;color: #000; font-size: 30rpx;padding: 0 8px;height: unset" open-type="contact">在线客服</u-button>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view> -->
				<view class="kefu" @click="goKf">
				    <view class="kefu-left">
				        <u-image width="38rpx" height="38rpx" src="/static/img/kefu1.png"></u-image>
				        <text style="margin-left: 16rpx;">在线客服</text>
				    </view>
				    <u-icon name="arrow-right"></u-icon>
				</view>
                <!-- <view style="height: 6rpx"></view>
                        <view class="kefu" @click="showAudit = true" v-if="isCash">
                            <view class="kefu-left">
                                <u-image width="38rpx" height="38rpx" src="/static/img/qb.png"></u-image>
                                <text style="margin-left: 16rpx;">钱包提现</text>
                            </view>
                            <u-icon name="arrow-right"></u-icon>
                        </view> -->
                <view style="height: 6rpx"></view>
                <!-- <view class="kefu" @click="showJoin = true" v-if="myInfoVo.isWaiter ==0"> -->
                 <view class="kefu" @click="goExaminers" v-if="myInfoVo.isWaiter ==1">
                    <view class="kefu-left">
                        <u-image width="38rpx" height="38rpx" src="/static/img/settled1.png"></u-image>
                        <text style="margin-left: 16rpx;">打手中心</text>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view>
                <view class="kefu" @click="goJoin" v-else >
                    <view class="kefu-left">
                        <u-image width="38rpx" height="38rpx" src="/static/img/settled1.png"></u-image>
                        <text style="margin-left: 16rpx;">打手入驻</text>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view>

            </view>
        </view>
        <u-popup :show="showPhone" @close="showPhone = false" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view class="qrcode" style="margin: 40rpx;" @click="handleCall">
                <view class="phone">
                    <u-icon :customStyle="{paddingTop:10+'rpx'}" name="phone" :size="18"></u-icon>
                    <text>{{phone}}</text>
                </view>
                <text class="desc">点击拨打客服电话</text>
            </view>
        </u-popup>
        <!-- 提现弹窗 -->
        <u-modal :show="showAudit" title="提现" :showCancelButton="true" @confirm="handleConfirm" @cancel="showAudit = false">
            <u--form labelPosition="left" :model="cash" ref="uForm" :rules="rules">
                <u-form-item label="账号" prop="alipay" ref="item1">
                    <u--input v-model="cash.alipay" placeholder="请输入支付宝收款账号"></u--input>
                </u-form-item>
                <u-form-item label="金额" prop="balance" ref="item2">
                    <u--input v-model="cash.balance" placeholder="请输入提现金额" type="digit"></u--input>
                </u-form-item>
            </u--form>
            <view style="font-size: 24rpx;color: #999;margin-top: 10rpx">{{txNumber}}</view>
        </u-modal>
        <!-- 充值弹窗 -->
        <u-modal :show="showTopUp" title="充值" :showCancelButton="true" @confirm="handleTopUpAmount" @cancel="showTopUp = false">
            <u--form labelPosition="left" :model="topUpAmount" ref="uForm">
                <u-form-item label="金额" prop="topUpAmount" ref="item2">
                    <u--input v-model="topUpAmount" placeholder="请输入充值金额" type="digit"></u--input>
                </u-form-item>
            </u--form>
        </u-modal>
        <!-- 绑定邀请人弹窗 -->
        <u-modal :show="showBind" title="绑定推荐人" :showCancelButton="true" @confirm="handleBind" @cancel="showBind = false">
            <u--form labelPosition="left" :model="superiorId" ref="uForm" labelWidth="60">
                <u-form-item label="推荐人" prop="superiorId" ref="item2">
                    <u--input v-model="superiorId" placeholder="请输入推荐人ID" type="number"></u--input>
                </u-form-item>
            </u--form>
        </u-modal>
        <!-- 入驻弹窗 -->
        <u-modal :show="showJoin" title="核查员入驻" :showCancelButton="true" @confirm="handleConfirmJoin" @cancel="showJoin = false">
            <u--form labelPosition="top" :model="joinForm">
                <u-form-item prop="name">
                    <u--input v-model="joinForm.name" placeholder="姓名"></u--input>
                </u-form-item>
                <u-form-item prop="sex">
                    <u--input v-model="joinForm.sex" placeholder="性别"></u--input>
                </u-form-item>
                <u-form-item prop="idCard">
                    <u--input v-model="joinForm.idCard" placeholder="身份证号"></u--input>
                </u-form-item>
                <u-form-item prop="idCardZmImg">
                    <u--input v-model="joinForm.idCardZmImg" placeholder="身份证正面"></u--input>
                </u-form-item>
                <u-form-item prop="idCardFmImg">
                    <u--input v-model="joinForm.idCardFmImg" placeholder="身份证反面"></u--input>
                </u-form-item>
                <u-form-item prop="bankCard">
                    <u--input v-model="joinForm.bankCard" placeholder="银行卡号"></u--input>
                </u-form-item>
                <u-form-item prop="bankCardImg">
                    <u--input v-model="joinForm.bankCardImg" placeholder="银行卡照片"></u--input>
                </u-form-item>
                <u-form-item prop="phone">
                    <u--input v-model="joinForm.phone" placeholder="手机号"></u--input>
                </u-form-item>
                <u-form-item prop="wx">
                    <u--input v-model="joinForm.wx" placeholder="微信号"></u--input>
                </u-form-item>
                <u-form-item prop="email">
                    <u--input v-model="joinForm.email" placeholder="邮箱"></u--input>
                </u-form-item>
            </u--form>
        </u-modal>
        <!-- 收货地址 -->
        <u-modal :show="showAddress" title="收货地址" :showCancelButton="true" @confirm="handleConfirmAddress" @cancel="showAddress = false">
            <u--form labelPosition="left" :model="addressForm">
                <u-form-item label="姓名" prop="relName" ref="item1">
                    <u--input v-model="addressForm.relName" placeholder="请输入收货姓名"></u--input>
                </u-form-item>
                <u-form-item label="电话" prop="phonenumber" ref="item2">
                    <u--input v-model="addressForm.phonenumber" placeholder="请输入收货电话"></u--input>
                </u-form-item>
                <u-form-item label="地址" prop="address" ref="item2">
                    <u--input v-model="addressForm.address" placeholder="请输入收货地址"></u--input>
                </u-form-item>
            </u--form>
        </u-modal>
        <!-- 用户昵称和图像 -->
        <s-wx-auth ref="authRef" @getMyInfo="getMyInfo"></s-wx-auth>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>

<script>
import {
    getMyInfoApi,
    getByKeyApi,
    auditApi,
    getUnReadApi,
    addJoinApi,
    updateAddressApi,
    topUpApi,
} from "@/sheep/api/index";
import { mapGetters, mapMutations } from "vuex";
import { bindSuperiorHandApi } from "../../sheep/api";
import store from "@/sheep/store/index";
export default {
    data() {
        return {
            isCash: false,
            timer: null,
            phone: "",
            showQrCode: false,
            showAudit: false,
            showTopUp: false,
            showBind: false,
            showJoin: false,
            titleHeight: 0,
            customTop: 0,
            paramsPage: {
                pageNum: 1,
                pageSize: 10,
            },
            joinForm: {
                info: "",
            },
            myInfoVo: {},
            showPhone: false,
            showAddress: false,
            orderTab: [
                {
                    name: "全部",
                    imgUrl: "/static/img/order-11.png",
                },
                {
                    name: "待接单",
                    imgUrl: "/static/img/order-21.png",
                },
                {
                    name: "进行中",
                    imgUrl: "/static/img/jxz1.png",
                },
                {
                    name: "待结单",
                    imgUrl: "/static/img/dqr1.png",
                },
                {
                    name: "已完成",
                    imgUrl: "/static/img/order-31.png",
                },
            ],
            goodsTab: [
                {
                    name: "去发布",
                    imgUrl: "/static/img/goods1.png",
                },
                {
                    name: "商品列表",
                    imgUrl: "/static/img/goods2.png",
                },
                {
                    name: "交易中",
                    imgUrl: "/static/img/goods3.png",
                },
                {
                    name: "已卖出",
                    imgUrl: "/static/img/goods4.png",
                },
            ],
            cash: {
                alipay: "",
                balance: "",
            },
            rules: {
                alipay: {
                    type: "string",
                    required: true,
                    message: "请填写收款账号",
                    trigger: ["blur", "change"],
                },
                balance: {
                    type: "number",
                    required: true,
                    message: "请填写提现金额",
                    trigger: ["blur", "change"],
                },
            },
            addressForm: {
                relName: "",
                address: "",
                phonenumber: "",
            },
            txNumber: "",
            topUpAmount: null,
            superiorId: null,
			isUp: true,
        };
    },
    onLoad() {
        this.getHeight();
        this.getPhone();
        this.getIsUp();
        // this.getIsCash();
        // this.getTxNumber();
        getMyInfoApi().then((res) => {
            if (res.code == 200) {
                if (!res.data.phonenumber) {
                    store.commit("user/setAuth", true);
                    return;
                }
            }
        });
    },
    onShow() {
        this.getMyInfo();
        // this.getSetTimeNumber();
    },
    onHide() {
        // 清除定时器
        // clearInterval(this.timer);
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    methods: {
        ...mapMutations({
            setUserInfo: "user/setUserInfo",
        }),
        /** 循环请求消息接口 */
        async getMessage() {
            let res = await getUnReadApi();
            if (res.data) {
                uni.showTabBarRedDot({
                    index: 3,
                });
                // 清除定时器
                clearInterval(this.timer);
            } else {
                // 清空红点
                uni.hideTabBarRedDot({
                    index: 3,
                });
            }
        },
        /** 延时器时间 */
        async getSetTimeNumber() {
            let res = await getByKeyApi("chat");
            let setTimeNumber = res.data[0].configValue;
            //定时3秒刷新一次未读消息
            let that = this;
            this.timer = setInterval(() => {
                that.getMessage();
            }, setTimeNumber);
        },
        handleInfo(url){
            uni.navigateTo({
                url
            });
        },
        handleAvatar() {
            this.$refs.authRef.open(this.myInfoVo.nickName, this.myInfoVo.avatar);
        },
        handleCashRecord(type) {
            uni.navigateTo({
                url: "/pages/cashRecord/index?type=" + type,
            });
        },
        goLike() {
            uni.navigateTo({
                url: "/pages/mine/cardiacList",
            });
        },
        goCoupon() {
            uni.navigateTo({
                url: "/pages/coupon/index",
            });
        },
        goTeam() {
            uni.navigateTo({
                url: "/pages/mine/myTeam",
            });
        },
        goGuanZhu() {
            uni.navigateTo({
                url: "/pages/mine/guanZhuList",
            });
        },
        // 获取微信右上角胶囊高度
        getHeight() {
            let res = uni.getMenuButtonBoundingClientRect();
            this.titleHeight = res.top + 10;
            this.customTop = res.top + 3;
        },
        // 提现
        handleConfirm() {
            this.$refs.uForm
                .validate()
                .then((res) => {
                    auditApi(this.cash).then((res) => {
                        if (res.code === 200) {
                            this.showAudit = false;
                            this.getMyInfo();
                        }
                    });
                })
                .catch((errors) => {
                    console.log(errors);
                });
        },
        // 充值
        handleTopUpAmount() {
            let form = {
                payWay: "WX_XCX_PAY",
                amount: this.topUpAmount,
                orderType: "amount",
                attach: null,
                desc: "钱包充值",
            };
            let that = this;
            topUpApi(form).then((res) => {
                if (res.code === 200) {
                    const data = res.data;
                    uni.requestPayment({
                        provider: "wxpay",
                        timeStamp: data.timeStamp,
                        nonceStr: data.nonceStr,
                        package: data.packageValue,
                        signType: data.signType,
                        paySign: data.paySign,
                        success: function (res) {
                            that.showTopUp = false;
                            that.getMyInfo();
                        },
                        fail: function (err) {
                            console.log("支付失败", err);
                        },
                    });
                }
            });
        },
        handleBind() {
            bindSuperiorHandApi(this.superiorId).then((res) => {
                if (res.code === 200) {
                    this.showBind = false;
                    uni.showToast({
                        title: "绑定成功",
                        icon: "none",
                    });
                }
            });
        },
        // 入驻
        handleConfirmJoin() {
            addJoinApi(this.joinForm).then((res) => {
                if (res.code === 200) {
                    this.showJoin = false;
                    uni.showToast({
                        title: "入驻资料提交成功",
                        icon: "none",
                    });
                }
            });
        },
        handleConfirmAddress() {
            updateAddressApi(this.addressForm).then((res) => {
                if (res.code === 200) {
                    this.showAddress = false;
                    uni.showToast({
                        title: "修改成功",
                        icon: "none",
                    });
                }
            });
        },
        getMyInfo() {
            getMyInfoApi().then((res) => {
                this.myInfoVo = res.data;
                this.setUserInfo(this.myInfoVo);

                this.addressForm.relName =
                    this.myInfoVo.relName || this.myInfoVo.nickName;
                this.addressForm.phonenumber = this.myInfoVo.phonenumber;
                this.addressForm.address = this.myInfoVo.address;
            });
        },
        copy(value) {
            uni.setClipboardData({
                data: value,
                success: function () {
                    uni.showToast({
                        title: "复制成功",
                        icon: "none",
                    });
                },
            });
        },
        handleOrder(index) {
            uni.navigateTo({
                url: "/pages/order/index?type=" + index,
            });
        },
        handlerMyGoods(index) {
            if (index == 3) {
                uni.navigateTo({
                    url: "/pages/mine/myTransaction?type=5",
                });
            } else if (index == 2) {
                uni.navigateTo({
                    url: "/pages/mine/myTransaction?type=0",
                });
            } else if (index == 1) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=0",
                });
            } else if (index == 0) {
                uni.navigateTo({
                    url: "/pages/mine/goodRelease",
                });
            }
        },
        goExaminers() {
            uni.navigateTo({
                url: "/pages/examiners/index",
            });
        },
        goJoin() {
            uni.navigateTo({
                url: "/pages/mine/join",
            });
        },
        goVip() {
            uni.navigateTo({
                url: "/pages/vip/index",
            });
        },
        handleCall() {
            uni.makePhoneCall({
                phoneNumber: this.phone,
            });
        },
        async getPhone() {
            let res = await getByKeyApi("phone");
            this.phone = res.data[0].configValue;
        },
        async getIsCash() {
            let res = await getByKeyApi("is_cash");
            this.isCash = res.data[0].configValue == 1;
        },
        async getTxNumber() {
            let res = await getByKeyApi("tx_number");
            this.txNumber = res.data[0].configValue;
        },
		
		async getIsUp() {
		    let res = await getByKeyApi("is_up");
		    this.isUp = res.data[0]?.configValue == 1;
		},
		goKf(){
			wx.openCustomerServiceChat({
			  extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc94f7f122e00029ff'},
			  corpId: 'ww946e84db1faa17ae',
			  success(res) {
				  console.log(2222,res);
			  },
			  fail(res) {
			  	  console.log(333,res);
			  }
			})
		}
    },
};
</script>

<style lang="scss" scoped>
.mine {
    background-color: #f5f5f5;
    height: 100vh;
    position: relative;

    .custom {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 40rpx;
        font-weight: bolder;
        display: flex;
        align-items: center;
        z-index: 1;
    }

    .main {
        padding: 0 10rpx;

        .header {
            display: flex;
            padding: 42rpx 0;
            color: #fff;
            justify-content: space-between;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/minebg.png") no-repeat;
                background-size: 100% auto;
                // background: #222020;
            }
        }
    }

    .index {
        padding: 30rpx;
        position: relative;
        z-index: 99;

        .info {
            font-size: 24rpx;
            display: flex;
            align-items: center;
        }

        .avatar {
            padding: 30rpx;
            background-color: #fff;
            border-radius: 20rpx;

            .avatar-box {
                height: 50%;
                display: flex;
                margin-bottom: 20rpx;

                .userId {
                    margin-left: 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;

                    .phonenumber {
                        display: flex;
                        align-items: center;
                        font-weight: 700;
                    }
                }
            }
        }

        .order {
            margin-top: 30rpx;
            padding: 30rpx;
            background-color: #fff;
            border-radius: 20rpx;

            .kefu {
                margin: 20rpx 0 30rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .kefu-left {
                    display: flex;
                    align-items: center;
                    font-size: 30rpx;
                }
            }
        }

        .title {
            font-size: 30rpx;
            font-weight: 700;
            margin-bottom: 20rpx;
        }

        .grid-text {
            margin: 16rpx 0;
            font-size: 24rpx;
        }
    }

    .qrcode {
        padding: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .phone {
            display: flex;
            align-items: center;
        }

        .desc {
            font-size: 24rpx;
            color: #999999;
            margin-top: 10rpx;
        }
    }
}

::v-deep .u-modal__content {
    display: unset !important;
}
</style>
